<template>
	<view>
		<view class="head">
			<view class="headImg">
				<image :src="headImg"></image>
			</view>
			<view class="headName">
				<view class="headLogn">注册/登录</view>
				<view class="headSign-in">
					<view>微会员</view>
					<view
						style="font-size: 25upx; font-weight: bold;background-color: #ebebeb;padding: 5upx 10upx;border-radius: 5upx;">
						天天签到
						<u-icon name="arrow-right" color="#CD5B59"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="mine">
			<view class="card">
				<view class="card-item">
					<view>--</view>
					<view>积分</view>
				</view>
				<view class="card-item">
					<view>--</view>
					<view>积分</view>
				</view>
				<view class="card-item">
					<view>--</view>
					<view>积分</view>
				</view>
			</view>
			<view class="miniApp">
				<u-icon :name="routine"></u-icon>
				<text style="margin-left: 20upx;">我的小程序</text>
			</view>
		</view>

		<view class="panel">
			<view>我的权益</view>
			<!-- <u-grid :col="4" :border="false">
				<u-grid-item v-for="(item, index)  in equityList" :index="index" :key="index">
					<u-icon :name="item.equityImg" :size="70"></u-icon>
					<view class="grid-text">{{ item.equityName }}</view>
				</u-grid-item>
			</u-grid> -->
			<swiper :indicator-dots="true" indicator-color="#D7DEF1"
				style="height: 190upx;" indicator-active-color="#C2D0EC">
				<swiper-item v-for="pageIndex in Math.ceil(equityList.length / 4)" :key="pageIndex">
					<u-grid :col="4" :border="false">
						<u-grid-item v-for="(item, index) in sliceList(pageIndex + 1)" :key="index">
							<u-icon :name="item.equityImg" :size="70"></u-icon>
							<view class="grid-text">{{ item.equityName }}</view>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
		</view>

		<!-- 底部功能区 -->
		<view class="u-margin-20" style="border-radius: 10upx;padding: 10upx;background-color: #fff;">
			<u-cell-group :border="false">
				<u-cell-item title="资料管理" @click="$u.route('')" :border-bottom="true"></u-cell-item>
				<u-cell-item title="设置" @click="$u.route('')" :border-bottom="false"></u-cell-item>
			</u-cell-group>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				headImg: '',
				routine: '',
				equityList: [{
						equityImg: '',
						equityName: '积分兑换'
					}, {
						equityImg: '',
						equityName: '会员活动'
					},
					{
						equityImg: '',
						equityName: '停车优惠'
					},
					{
						equityImg: '',
						equityName: '测试111'
					},
					{
						equityImg: '',
						equityName: '测试222'
					},
					{
						equityImg: '',
						equityName: '测试333'
					},

				]
			}
		},
		methods: {
			sliceList(pageIndex) {
				const startIndex = (pageIndex - 1) * 4;
				const endIndex = pageIndex * 4;
				return this.equityList.slice(startIndex, endIndex);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(to bottom, #CEBB9B, #F0F0F0);
	}

	.head {
		display: flex;
		margin: 0 20upx;
		margin-top: 160upx;

		text-align: center;

		.headImg {
			width: 23%;
			height: 150upx;
			border-radius: 50%;
			border: 1px solid #ebebeb;
			padding: 20upx;
			background-color: #ebebeb;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.headName {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 20upx 0;
			margin-left: 20upx;
			width: 80%;

			.headLogn {
				text-align: left;
				font-size: 40upx;
				font-weight: bold;
			}

			.headSign-in {
				display: flex;
				justify-content: space-between;
				// text-align: right;
				// border: 1px solid #ebebeb;
				// background-color: #ebebeb;
				// font-weight: bold;
			}
		}
	}

	.mine {
		margin: 20upx;
		margin-top: 40upx;
		padding: 20upx 0;
		border-radius: 10upx;
		background-color: #FEFDFB;

		.card {
			display: flex;
			justify-content: space-around;

			.card-item {
				text-align: center;
				line-height: 50upx;
				margin: 10upx 0;
			}
		}

		.miniApp {
			padding-top: 20upx;
			border-top: 1px solid #ebebeb;
			margin-left: 30upx;
		}

	}

	.panel {
		margin: 0 20upx;
		background-color: #fff;
		padding: 20upx 30upx;
		border-radius: 10upx;

		.grid-text {
			margin-top: 10upx;
		}
	}
</style>